<template>
  <div class="message fixed-top">
    <!-- 引入公共头部 -->
    <NavBar title="消息中心" fixed back/>
    <van-list v-model="loading" :finished="finished" :offset = "offset" @load="onLoad">
      <van-cell-group v-model="activeName" v-for="(item, index) in list" v-bind:key="index" >
        <van-cell  :value=UTILS.formatDate(item.createTime) @click="changeStatus(item.id, item.isRead)" is-link>
          <template slot="title">
            <span>{{item.content}}</span>
            <van-tag type="danger" v-if="item.isRead === 0 ? true: false">未读</van-tag>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
    <EmptyData text="暂时没有相关消息" v-if="empty"/>
  </div>
</template>
<script>
import NavBar from '../../components/common/NavBar.vue'
import EmptyData from '../../components/common/EmptyData.vue'
import messageApi from '../../api/user'
import { Toast } from 'vant'
export default {
  name: 'message',
  data () {
    return {
      currentPage: 1,
      pageSize: 12,
      loading: false,
      finished: false,
      offset: 1,
      activeName: '',
      list: [],
      empty: false
    }
  },
  components: {
    NavBar,
    EmptyData
  },
  created () {

  },
  methods: {
    onLoad: function () {
      let _this = this
      // 异步更新数据
      setTimeout(() => {
        _this.getAllMessage()
      }, 250)
    },
    getAllMessage: function () {
      let _this = this
      messageApi.queryMessageList(this.currentPage, this.pageSize).then(function (res) {
        if (res.data.success) {
          if (res.data.re.messageREList === null) {
            _this.empty = true
          } else {
            for (let i = 0; i < res.data.re.messageREList.length; i++) {
              _this.list.push(res.data.re.messageREList[i])
            }
            _this.currentPage = _this.currentPage + 1
          }
          _this.loading = false
          // 数据全部加载完成
          if (_this.list.length >= res.data.re.totalNum) {
            // 加载状态结束
            _this.finished = true
          }
        } else {
          Toast.fail('获取消息异常')
        }
      })
    },
    changeStatus: function (id, isRead) {
      if (isRead === 0) {
        messageApi.updateMessageStatus(id, isRead).then(function (res) {
        })
      }
      this.$router.push({path: '/user/messageDetail', query: {messageId: id}})
    }
  }
}
</script>
<style>

</style>
